<template>
  <div class="lipinjifen">
    <header>
      <div class="more-left" @click="danji"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="more-center">{{msg}}</div>
      <div class="more-right"><a></a></div>
    </header>
    <section class="lipinjifen-main">
      <img src="../assets/img/lipin-jifen-banner.png">
      <div class="lipinjifen-font">
        <p class="fontone">{{huafei}}</p>
        <p class="fonttwo"><span>{{jifen}}</span><span>{{num}}分</span></p>
        <p class="fontthreen">{{style}}</p>
        <p class="fontfour"><span>{{kucun}}</span><span>{{kucunnum}}</span></p>
        <p class="fontfive">
          <span>{{improtant}}</span>
          <span class="lipinjifen-red">{{tishi}}</span>
        </p>
      </div>
    </section>
    <footer class="lipinjifen-footer">
      <span v-show="yincang">{{jifenbuzu}}</span>
      <span v-show="kucunyin">{{kucunbuzu}}</span>
      <router-link to='duihuanxiangqing'><span class="duihuan" v-show="duihuanyin">{{duihuan}}</span></router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      yincang: false,
      kucunyin: false,
      duihuanyin: false,
      msg: '礼品详情',
      huafei: '100元充值话费',
      jifen: '积分:',
      num: 70,
      style: '兑换方式:在线充值',
      kucun: '库存:',
      kucunnum: 70,
      improtant: '重要提示:',
      tishi: '积分兑换礼品是满意网络科技公司积分兑换礼品是满意网络科技公司积分兑换礼品是满意网络科技公司积分兑换礼品是满意网络科技公司',
      jifenbuzu: '积分不足',
      kucunbuzu: '库存不足',
      duihuan: '立即兑换'
    }
  },
  mounted () {
    if (this.num > 10 & this.kucunnum > 10) {
      this.duihuanyin = true
    } else if (this.num < 10) {
      this.yincang = true
    } else if (this.kucunnum < 10) {
      this.kucunyin = true
    }
  },
  methods: {
    danji () {
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
  @import '.././assets/css/lipinjifen.less';
</style>
